<template>
  <el-table
    v-bind="$attrs"
    :data="listData"
    element-loading-text="加载中..."
    border
    fit
    highlight-current-row
    class="table-fixed"
    ref="dataTable"
    :span-method="arraySpanMethod"
    :cell-class-name="addClass"
    @row-click="rowClick"
    @selection-change="selectionLineChangeHandle"
    :lazy="lazyShow"
    :load="lazyLoad"
    :row-key="rowKey"
    :tree-props="treeProps"
    :default-expand-all="defaultExpandAll"
    :expand-row-keys="expandRowKeys"
  >
    <el-table-column :label="tableTitle" align="left">
      <slot name="prepend" />
      <el-table-column
        type="selection"
        v-if="selectionShow"
        reserve-selection
        width="55"
      ></el-table-column>
      <el-table-column
        v-for="item in columns"
        :key="item.field"
        align="center"
        :fixed="item.fixed ? item.fixed : false"
        :label="item.title"
        :width="item.width"
      >
        <template slot-scope="scope">
          <slot name="edit-slot" :row="scope.row" />
          <el-input
            v-if="scope.row.isEdit"
            :placeholder="'请输入' + item.title"
            v-model="scope.row[item.field]"
            type="textarea"
          ></el-input>
          <span v-else>
            {{
              item.filter
                ? item.filter(scope.row[item.field], scope.row)
                : getData(scope.row[item.field]) || "无"
            }}
          </span>
        </template>
      </el-table-column>
      <slot name="append" />
      <el-table-column
        label="操作"
        align="center"
        :width="btnGroupWidth"
        :fixed="fixedRight ? 'right' : false"
        class-name="small-padding fixed-width"
        v-if="columns.length > 0 && controlShow"
      >
        <!-- <template slot="empty">
        <el-empty :image-size="100" :description="noText"></el-empty>
      </template> -->
        <template slot-scope="scope">
          <div class="group">
            <slot name="btn-group" :row="scope.row" />
            <el-button
              v-show="showEdit"
              type="primary"
              size="mini"
              @click.stop="$emit('edit', scope.row)"
            >
              {{ editText }}
            </el-button>
            <el-popconfirm
              confirm-button-text="删除"
              confirm-button-type="danger"
              cancel-button-text="取消"
              icon="el-icon-info"
              icon-color="red"
              title="删除后该条信息将从列表中移除，请确认是否删除~"
              @onConfirm="$emit('remove', scope.row)"
            >
              <el-button
                v-show="showRemove"
                slot="reference"
                type="danger"
                size="mini"
              >
                删除
              </el-button>
            </el-popconfirm>
          </div>
        </template>
      </el-table-column>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  props: {
    listData: {
      default: [],
      type: Array
    },
    listRule: {
      //控制列表列的显示
      default: [],
      type: Array
    },
    controlShow: {
      type: Boolean,
      default: true
    },
    selectionShow: {
      type: Boolean,
      default: false
    },
    showEdit: {
      //显示编辑按钮
      default: true,
      type: Boolean
    },
    showRemove: {
      //显示删除按钮
      default: true,
      type: Boolean
    },
    btnGroupWidth: {
      // 按钮组宽度
      default: "200px",
      type: String
    },
    fixedRight: {
      //是否操作固定
      default: false,
      type: Boolean
    },
    editText: {
      //编辑按钮文字
      default: "编辑",
      type: String
    },
    noText: {
      default: "暂无数据",
      type: String
    },
    arraySpanMethod: {
      type: Function,
      default: () => {}
    },
    addClass: {
      type: Function,
      default: () => {}
    },
    lazyShow: {
      type: Boolean,
      default: false
    },
    lazyLoad: {
      type: Function,
      default: () => {
        return [];
      }
    },
    treeProps: {
      type: Object,
      default: () => {
        return { children: "children", hasChildren: true };
      }
    },
    rowKey: {
      type: String,
      default: "id"
    },
    defaultExpandAll: {
      type: Boolean,
      default: false
    },
    expandRowKeys: {
      type: Array,
      default: () => {
        return [];
      }
    },
    tableTitle: {
      type: String,
      default: ""
    }
  },
  computed: {
    columns() {
      return this.listRule.filter(v => v.tableVisible);
    }
  },
  methods: {
    getData(item) {
      let data = "";
      if (item === 0 || item) {
        data = item.toString();
      }
      return data;
    },
    selectionLineChangeHandle(e) {
      this.$emit("setHasSelectList", e);
    },
    doLayout() {
      this.$nextTick(() => {
        this.$refs.dataTable.doLayout();
      });
    },
    rowClick(e) {
      this.$emit("rowClick", e);
    },
    selectRow(row) {
      // 给操作行 高亮
      if (row) {
        this.$refs.dataTable.setCurrentRow(row, true); // 高亮某一行
      } else {
        this.$nextTick(() => {
          this.$refs.dataTable.setCurrentRow(); // 取消高亮
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.group {
  white-space: nowrap;
}
.group::v-deep > * {
  margin-right: 8px;
  margin-left: 0px;
}
</style>
<style lang="scss">
.table-fixed {
  /deep/ .el-table__fixed-right {
    height: 100% !important; //设置高优先，以覆盖内联样式
  }

  /deep/ .el-table__fixed {
    height: 100% !important; //设置高优先，以覆盖内联样式
  }
}
</style>
